<template>
    <div>


        <div id="container"   
        v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
            ></div>

    </div>
</template>

<script>
import { Loading } from 'element-ui';
import EventBus from '../../../utils/map/click';
export default {
    mounted() {

        this.initMap()
    },
    data() {
        return {
            time:500,
            J: '',
            W: '',
            loading: true, // 添加loading状态，默认为true
        }
    },
    methods: {

        initMap() {
            const center = new TMap.LatLng(39.6298, 118.1804);
            const mapInstance = new TMap.Map(document.getElementById("container"), {
                center,
                zoom: 13,
                pitch: 0,
                rotation: 0,
            });
            let markerLayer = null; // 在事件监听器外部声明 markerLayer 变量

            mapInstance.on('click', (evt) => {
                this.W = evt.latLng.lat;
                this.J = evt.latLng.lng;

                if (markerLayer) {
                    markerLayer.setMap(null); // 移除之前的标记点
                }

                markerLayer = new TMap.MultiMarker({
                    id: 'marker-layer',
                    map: mapInstance,
                });

                markerLayer.add({
                    position: evt.latLng,
                });

                EventBus.$emit('JWD', { W: this.W, J: this.J });

                this.$message({
                    showClose: true,
                    message: '选择成功',
                    type: 'success',
                    duration:500
                });
            });
            this.loading = false;
        }
    }

}
</script>

<style>
#container {
    width: 100%;

    /* z-index: 0; */
}
</style>